<!-- JX产品管理(spu) -->
<template>
    <div class="page-box">
        <div class="page-title">
            {{ '产品管理' }}
        </div>

        <div class="page-search">
            <div class="search-box" :style="{ height: IsHeight }">
                <el-input v-model="pageData.keywords" placeholder="名称/编号" style="width: 200px; margin-right: 10px"
                    suffix-icon="search" />
                <el-button>重置</el-button>
            </div>
            <div class="search-btn">
                <div class="btn_item" @click="handleClickHeight">
                    <img class="btn_img" src="@/assets/sx.png" alt="" />
                    <span> 高级筛选 </span>
                </div>
            </div>
        </div>
        <div class="search-btn-right">
            <el-button color="#626aef" type="primary" @click="handleClickAdd"> 新增产品 </el-button>
        </div>
        <el-button @click="deleteSelected" color="#6860FF" :disabled="selectedIds.length === 0">
            删除所选数据 ({{ selectedIds.length }})
        </el-button>
    </div>

    <div class="table-box">
        <el-table :data="tabeData" style="width: 100%" v-loading="loading" border
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column align="center" prop="name" label="名称" width="auto" />
            <el-table-column align="center" prop="no" label="编号" width="auto">
            </el-table-column>
            <el-table-column align="center" prop="measure_unit_name" label="耗材单位" width="auto" />
            <el-table-column align="center" prop="creator_name" label="创建人" width="auto">
            </el-table-column>
            <el-table-column align="center" prop="created_at" label="创建时间" width="auto" />


            <el-table-column align="center" prop="action" label="操作" width="auto">
                <template #default="scope">
                    <el-button type="primary" @click="handleClickEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" @click="handleClickDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <Pagination class="pagination" @pageSize="pageSize" @getPage="getPage" :page="pageData.page"
        :page-size="pageData.page_size" :total="total" />

    <productAdd ref="productAddRef" @init="getAlltabeData" />
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import Pagination from "@/components/Pagination.vue";
import productAdd from "./components/productManagement/productAdd.vue";
import api from "@/api";
import { ElMessage, ElMessageBox } from "element-plus";
//  新增出库
const productAddRef = ref<any>(null);
// 出库详情
let IsHeight = ref<number | string>(0);
// 定义ts数据
interface PageData {
    page_size: number;
    page: number;
    keywords: string;
}
// 定义数据
const PageData = ref<PageData>({
    page_size: 10,
    page: 1,
    keywords: "",
});

//  -----------------列表数据
const pageData = ref({
    page_size: 10,
    page: 1,
    keywords: "",
});
const total = ref(0);
const tabeData = ref([]);
// 侦听动态分页
watch(
    () => {
        return pageData.value;
    },
    () => {
        getAlltabeData();
    },
    { deep: true }
);

let nub = ref<number>(0);
const handleClickHeight = () => {
    nub.value++;
    if (nub.value % 2 == 1) {
        IsHeight.value = '50px';
    } else {
        IsHeight.value = '0px';
    }
}

const pageSize = (e: number) => {

    pageData.value.page_size = e
}
const getPage = (e: number) => {
    pageData.value.page = e
}
onMounted(() => {
    getAlltabeData();
})

// 获取选择的产品id
const selectedIds = ref<number[]>([]);
// 处理选择变化
const handleSelectionChange = (selection: any[]) => {
    selectedIds.value = selection.map(item => item.id);
};

// 删除所选数据// 删除所选数据
const deleteSelected = async () => {
    if (selectedIds.value.length === 0) {
        ElMessage.warning("请选择要删除的数据");
        return;
    }

    ElMessageBox.confirm(`确定删除选中的 ${selectedIds.value.length} 条数据吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(async () => {
        const res = await api.productbasics.deleteproduct(selectedIds.value);
        if (res.code === 200) {
            ElMessage.success(`成功删除 ${selectedIds.value.length} 条数据`);
            selectedIds.value = [];
            getAlltabeData();
        }
    });
};

// 删除
const handleClickDelete = (row: any) => {
    ElMessageBox.confirm("确定删除该产品吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(async () => {
        const res = await api.productbasics.deleteproduct([row.id]);
        if (res.code === 200) {
            ElMessage.success("删除成功");
            getAlltabeData();
        }
    });
}

// 获取产品列表
const getAlltabeData = async () => {
    const res = await api.productbasics.getproductList({
        ...pageData.value,
    });
    if (res.code == 200) {
        tabeData.value = res.data.data;
        total.value = res.data.pager.total_records;
    }
};

const loading = ref(false);
//  新增产品spu
const handleClickAdd = () => {
    productAddRef.value.handleDialog();
}

// 编辑
const handleClickEdit = (row: any) => {
    productAddRef.value.handleDialog(row);
}


</script>

<style lang="scss" scoped>
.btn-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

// 输入框样式
::v-deep .el-input__wrapper {
    background-color: rgba(250, 252, 251, 1);
}

//表格样式

::v-deep .el-table {
    --el-table-header-bg-color: rgba(235, 236, 240, 1);
}

::v-deep .el-table thead {
    color: #444;
}

//分页样式
.pagination {
    width: calc(100% - 250px);
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding-top: 10px;
    border-top: 1px solid #98989848;


}

::v-deep .el-pagination.is-background .el-pager li.is-active {
    background-color: #000 !important;
}

.table-footer {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    color: #333;
    background-color: #f5f7fa;
    margin-top: 20px;
}
</style>
